<template>
  <div class='container questions-new'>
    <el-card class="card">
      <div>
        <span>{{$route.query.id?'试题修改':'试题录入'}}</span>
      </div>
       <el-divider></el-divider>
      <el-form ref="newRef" label-width="100px" :model="formNew" :rules="rules">
        <!-- 学科 -->
        <el-form-item label="学科:" prop="subjectID">
          <el-select @change="changeSubject" placeholder="请选择" style="width:410px" v-model="formNew.subjectID">
            <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录 -->
        <el-form-item label="目录:" prop="catalogID">
          <el-select placeholder="请选择" style="width:410px" v-model="formNew.catalogID">
            <el-option v-for="item in catalogList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- 企业 -->
        <el-form-item label="企业:" prop="enterpriseID">
          <el-select placeholder="请选择" style="width:410px" v-model="formNew.enterpriseID">
            <el-option v-for="item in enterpriseList" :key="item.id" :label="item.company" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市 -->
        <el-form-item label="城市:" prop="city">
          <el-select placeholder="请选择" @change="changeCitys" style="width:200px;margin-right:10px" v-model="formNew.province">
            <el-option v-for="item in cityList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select placeholder="请选择" style="width:200px" v-model="formNew.city">
            <el-option v-for="item in areaList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- 方向 -->
        <el-form-item label="方向:" prop="direction">
          <el-select placeholder="请选择" style="width:410px" v-model="formNew.direction">
            <el-option v-for="item in directionList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- 题型 -->
        <el-form-item label="题型:" prop="questionType">
          <el-radio-group v-model="formNew.questionType">
            <el-radio v-for="item in questionList" :key="item.value" :label="item.value+''" :value="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item label="难度:" prop="difficulty">
          <el-radio-group v-model="formNew.difficulty">
            <el-radio v-for="item in difficultyList" :key="item.value" :label="item.value+''" :value="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item label="题干:" prop="question" class="quill-editor">
          <quill-editor style="height:200px" :options="editorOption" v-model="formNew.question"></quill-editor>
        </el-form-item>
        <!-- 选项 -->
        <el-form-item label="选项:" v-if="formNew.questionType !== '3'">
            <div style="flex;margin:20px 0" v-for="item in formNew.options" :key="item.code">
              <el-radio v-if="formNew.questionType === '1'" v-model="item.isRight" :label="true" @change="changeRadio1(item)">{{item.code}}</el-radio>
              <el-checkbox v-if="formNew.questionType === '2'" v-model="item.isRight">{{item.code}}</el-checkbox>
              <el-input style="width:200px;margin-right:10px" v-model="item.title"></el-input>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                >
                <img v-if="item.img" :src="item.img" class="avatar">
                <span v-else>上传图片</span>
                <i class="el-icon-circle-close"></i>
              </el-upload>
          </div>
          <el-button
          type="danger"
          size="small"
          :disabled="this.formNew.questionType !== '2'"
          @click="addAnswer"
          >
            +增加选项与答案
          </el-button>
        </el-form-item>
        <!-- 解析视频 -->
        <el-form-item label="解析视频:">
          <el-input v-model="formNew.videoURL" style="width:400px"></el-input>
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item label="答案解析:" prop="answer" class="quill-editor">
          <quill-editor style="height:200px" :options="editorOption" v-model="formNew.answer"></quill-editor>
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item label="题目备注:">
          <el-input type="textarea" style="width:410px" v-model="formNew.remarks"></el-input>
        </el-form-item>
        <!-- 试题标签 -->
        <el-form-item label="试题标签:" prop="tags">
          <el-select
            style="width:410px"
            v-model="formNew.tags"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择试题标签">
          <el-option
            v-for="item in tagList"
            :key="item.value"
            :label="item.label"
            :value="item.label">
          </el-option>
          </el-select>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button
          type="primary"
          size="small"
          v-if="!this.$route.query.id"
          @click="addText"
          >确认提交</el-button>
          <el-button
          v-else
          type="success"
          size="small"
          @click="editText"
          >确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { simple as subjectSimple } from '@/api/hmmm/subjects'
import { simple as catalogSimple } from '@/api/hmmm/directorys'
import { list as enterpriselist } from '@/api/hmmm/companys'
import { quillEditor } from 'vue-quill-editor'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'
import { simple as tagSimple } from '@/api/hmmm/tags'
import { add, update, detail } from '@/api/hmmm/questions.js'
export default {
  components: {
    quillEditor
  },
  name: 'questionsNew',
  data () {
    return {
      // 富文本编辑
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        }
      },
      // 对象
      formNew: {
        // 学科
        subjectID: null,
        // 目录
        catalogID: null,
        // 企业
        enterpriseID: null,
        // 城市
        province: null,
        // 地区
        city: null,
        // 方向
        direction: null,
        // 题型
        questionType: '1',
        // 难度
        difficulty: '1',
        // 题干
        question: null,
        // 答案解析
        answer: '',
        tags: '',
        // 选项
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ]
      },
      // 规则
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'change' }],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }],
        question: [{ required: true, message: '请输入题干', trigger: 'change' }],
        answer: [{ required: true, message: '请输入题干', trigger: 'change' }],
        tags: [{ required: true, message: '请添加标签', trigger: 'blur' }]
      },
      subjectList: [], // 学科列表
      catalogList: [], // 目录列表
      enterpriseList: [], // 企业列表
      cityList: provinces(),
      areaList: [],
      imageUrl: '',
      tagList: '',
      disabled: true,
      directionList: direction,
      questionList: questionType,
      difficultyList: difficulty
    }
  },
  created () {
    this.subject()
    this.enterprise()
    this.cityClass()
    if (this.$route.query.id) {
      this.getDetail()
    }
  },
  watch: {
    '$route.query': function () {
      if (this.$route.query.id) {
        this.getDetail()
      } else {
        this.formNew = {
          subjectID: null,
          catalogID: null,
          enterpriseID: null,
          province: null,
          city: null,
          direction: null,
          questionType: '1',
          difficulty: '1',
          question: null,
          options: [
            { isRight: false, code: 'A', title: '', img: '' },
            { isRight: false, code: 'B', title: '', img: '' },
            { isRight: false, code: 'C', title: '', img: '' },
            { isRight: false, code: 'D', title: '', img: '' }
          ]
        }
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      }
    }
  },
  methods: {
    // 获取题库信息
    async getDetail () {
      // { id: this.$route.query.id }
      const { data } = await detail({ id: this.$route.query.id })
      // data.tags = data.tags.split(',')
      this.formNew = data
    },
    // 添加选项与答案
    addAnswer () {
      this.formNew.options.push({
        isRight: false,
        code: String.fromCharCode(65 + this.formNew.options.length),
        title: '',
        img: ''
      })
    },
    changeRadio1 (item) {
      // 1.沙雕所有
      this.formNew.options.forEach(item => {
        item.isRight = false
      })
      // 2.复活自己
      item.isRight = true
    },
    // handleAvatarSuccess (res, file) {},
    // beforeAvatarUpload (file) {},
    // 确认提交按钮
    addText () {
      this.$refs.newRef.validate(async boo => {
        console.log(boo)
        if (boo) {
          // console.log('this.formNew', this.formNew)
          const data = { ...this.formNew }
          data.tags = data.tags.join(',')
          console.log(data.tags)
          await add(data)
          this.$message.success('添加成功')
          this.$router.push('/questions/list')
        }
      })
    },
    // 修改
    editText () {
      this.$refs.newRef.validate(async boo => {
        console.log(boo)
        if (boo) {
          const data = { ...this.formNew }
          // console.log(data)
          data.tags = data.tags.join(',')
          await update(data)
          this.$message.success('修改成功')
          this.$router.push('/questions/list')
        }
      })
    },
    // 获取学科列表
    async subject () {
      const { data } = await subjectSimple()
      // console.log(data)
      this.subjectList = data
    },
    // 根据学科获取对应的目录和试题标签
    async changeSubject (subjectID) {
      const subjectId = this.formNew.subjectID
      const catalog = await catalogSimple({ subjectID: subjectId })
      this.catalogList = catalog.data
      const tag = await tagSimple({ subjectID: this.formNew.subjectID })
      this.tagList = tag.data
      console.log(this.tagList, 6666)
    },
    // 获取企业列表
    async enterprise () {
      const { data: { items } } = await enterpriselist()
      this.enterpriseList = items
    },
    // 城市地区选择
    async cityClass () {
      const city = await provinces()
      this.cityList = city
    },
    changeCitys (area) {
      this.areaList = citys(area)
      // console.log(area)
    }
  }
}
</script>

<style scoped lang='scss'>
  .questions-new ::v-deep .card{
    margin: 20px 20px;
  }
  .avatar-uploader{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
  .questions-new ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 60px;
    line-height: 60px;
  }
 .questions-new ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 70px;
    line-height: 70px;
    text-align: center;
  }
 .questions-new ::v-deep .avatar {
    width: 100px;
    height: 70px;
    display: block;
  }
  .questions-new ::v-deep .avatar-uploader i{
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%,-50%);
  background: #fff;
  font-size: 18px;
  color: #999;
}
.questions-new ::v-deep .quill-editor{
  padding-bottom: 30px;
}
</style>
